<template>
	<model-page>
		<view class="visiteInfo">
			<Card>
				<view class="baseInfo_topic"> 基础信息 </view>
				<image
					src="../../../static/image/alarm/line.png"
					mode=""
					class="line"
				></image>
				<!-- 用户信息-->
				<view class="baseInfo">
					<view class="floor1">
						<view class="left">
							<view v-for="(item, index) in baseInfoList[0]" class="row">
								<view class="label">
									{{ item.label }}
								</view>
								<view class="content">
									{{ olderInfo[item.props] }}
								</view>
							</view>
						</view>
						<view class="right">
							<!-- <image src="../../../static/image/user_icon.png" mode=""></image> -->
							<image :src="olderInfo?.avatar || '../../../static/image/avatarPlace.png'" mode=""></image>
						</view>
					</view>
					<view class="floor2" v-if="isExpend">
						<view v-for="(item, index) in baseInfoList[1]" class="row space">
							<view class="label">
								{{ item.label }}
							</view>
							<view class="content">
								{{ olderInfo[item.props] }}
							</view>
						</view>
						<view class="foldable" @click="expend(false)">
							收起
							<image
								src="../../../static/image/arrow_bottom.png"
								mode=""
							></image>
						</view>
					</view>
					<view v-else class="expend" @click="expend(true)">
						<text>查看详情</text
						><image src="../../../static/image/arrow_top.png" mode=""></image>
					</view>
				</view>
			</Card>
			<view v-if="visiteInfo">
				<view class="topic"> 探望申请单： </view>
				<Card>
					<view class="baseInfo_topic">
						提交时间：<text>{{ visiteInfo?.createTime || '' }}</text>
					</view>
					<image
						src="../../../static/image/alarm/line.png"
						mode=""
						class="line"
					></image>
					<view class="listWrap">
						<view class="row space" v-for="(item, index) in timeList">
							<view class="label">
								{{ item.label }}
							</view>
							<view class="content">
								{{ visiteInfo[item.props] }}
							</view>
						</view>
					</view>
					<image
						src="../../../static/image/alarm/line.png"
						mode=""
						class="line"
					></image>
					<view class="topic"> 审批流程 </view>
					<view class="listWrap">
						<view class="row space">
							<view class="label"> 监护人 </view>
							<view class="content">
								{{ visiteInfo?.emergencyContact || '' }}
								{{ visiteInfo.noticeStatus === '0' ? '未通知' : '已通知' }}
							</view>
						</view>
						<view class="row space">
							<view class="label"> 看护人 </view>
							<view class="content">
								{{ visiteInfo.auditor }}
								{{ reviewStatusCash(visiteInfo.reviewStatus) }}
							</view>
						</view>
					</view>
				</Card>
			</view>

			<!-- 来访人员信息-->
			<view class="topic"> 来访人员信息： </view>
			<view class="formList">
				<uni-forms ref="vistorInfo" :modelValue="postData" :rules="rules">
					<view class="formItem" v-for="(item, index) in FormList" :key="index">
						<uni-forms-item
							:label="item.title"
							:required="item.required"
							:name="item.props"
						>
							<input
								type="text"
								:placeholder="item.placeholder"
								v-model="postData[item.props]"
							/>
						</uni-forms-item>
						<image src="../../../static/image/alarm/line.png" mode=""></image>
					</view>

					<view class="formItem_content">
						<uni-forms-item label="与老人关系" required name="relation">
							<view class="relation">
								<view
									class="relation_item"
									v-for="(item, index) in relationList"
									:key="index"
									@click="selectRelatiom(index)"
								>
									<image
										:src="`../../../static/image/${
											item.isChecked ? 'check_true' : '/alarm/checkNo'
										}.png`"
										mode=""
									></image>
									{{ item.title }}
								</view>
							</view>
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
			<view class="pass" v-if="visiteInfo">
				<Card>
					<view class="listWrap">
						<view class="row space" v-for="(item, index) in passList">
							<view class="label">
								{{ item.label }}
							</view>
							<view class="content">
								{{ visiteInfo[item.props] }}
							</view>
						</view>
					</view>
				</Card>
			</view>
			<view class="remark">
				<Card v-if="visiteInfo">
					<view>
						<view class="topic"> 备注 </view>
						<image
							src="../../../static/image/alarm/line.png"
							mode=""
							class="line"
						></image>
						<textarea
							v-model="postData.comment"
							placeholder="请输入处理结果"
							v-if="visiteInfo.reviewStatus === '1'"
							:maxlength="200"
						/>
						<view class="remarkResult" v-else>
							{{ visiteInfo.comment }}
						</view>
					</view>
				</Card>
			</view>
			<view class="btn_group">
				<view class="process_state">
					<view @click="agree">
						{{ ['1', '3'].includes(leavetypes) ? '进院确认' : '离院确认' }}
					</view>
				</view>
			</view>
		</view>
	</model-page>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import Card from '@/component/Card.vue'
import { onLoad } from '@dcloudio/uni-app'
import {
	getVisitDetails,
	checkVisit,
	insertVisitorInfo,
	getVisitorDetails,
	insertTempVisitorInfo,
	visitationAway,
} from '@/api/visite.js'
import { getElderInfo } from '@/api/index.js'

const vistorInfo = ref()
const FormList = ref([
	{
		title: '姓名',
		required: true,
		placeholder: '请输入名称(必填项)',
		props: 'name',
	},
	{
		title: '身份证号',
		required: true,
		placeholder: '请输入身份证号(必填项)',
		props: 'idCard',
	},
	{
		title: '电话',
		required: true,
		placeholder: '请输入手机号(必填项)',
		props: 'phone',
	},
	{
		title: '来访人数',
		required: true,
		placeholder: '请输入来访人数(必填项)',
		props: 'number',
	},
	{
		title: '车牌号',
		required: false,
		placeholder: '请输入车牌号',
		props: 'licensePlate',
	},
])
const relationList = ref([
	{ title: '子女', isChecked: false, value: '0' },
	{ title: '亲友', isChecked: false, value: '1' },
	{ title: '其他', isChecked: false, value: '2' },
])
// 规则校验
const rules = reactive({
	name: {
		rules: [
			{
				required: true,
				errorMessage: '姓名不能为空',
			},
			{
				minLength: 2,
				maxLength: 50,
				errorMessage: '名字不能小于2个字符或者大于30个字符',
			},
		],
	},
	idCard: {
		rules: [
			{
				required: true,
				errorMessage: '身份证号不能为空',
			},
			{
				validateFunction: function (rule, value, data, callback) {
					let reg =
						/^[1-9]\d{5}(18|19|20)?\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}([0-9]|X)$/
					if (!reg.test(value)) {
						callback('身份证号码格式不正确！')
					}
					return true
				},
			},
		],
	},
	phone: {
		rules: [
			{
				required: true,
				errorMessage: '手机号不能为空',
			},
			{
				validateFunction: function (rule, value, data, callback) {
					let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
					if (!reg.test(value)) {
						callback('手机号格式不正确！')
					}
					return true
				},
			},
		],
	},
	number: {
		rules: [
			{
				required: true,
				errorMessage: '来访人数不能为空',
			},
			{
				format: 'number',
				errorMessage: '人数只能输入数字',
			},
		],
	},
	relation: {
		rules: [
			{
				required: true,
				errorMessage: '与老人关系必选',
			},
		],
	},
})
onMounted(() => {
	vistorInfo.value.setRules(rules)
})
// 选择关系
const selectRelatiom = (index) => {
	relationList.value = relationList.value.map((val, ind) => {
		if (ind !== index) {
			val.isChecked = false
		} else {
			val.isChecked = !val.isChecked
			if (val.isChecked) {
				postData.relation = val.value
			} else {
				postData.relation = ''
			}
		}

		return val
	})
}
const isExpend = ref(false)
const textResult = ref('')
const expend = (flag) => {
	isExpend.value = flag
}
const leavetypes = ref()
const visitInfoIds = ref()
onLoad((options) => {
	const { vid, elderId, visitInfoId, leavetype } = options
	console.log()
	leavetypes.value = leavetype
	postData.elderId = elderId
	getolderInfo(elderId)
	if (vid) {
		reqVisiteInfo(vid)
	}
	if (visitInfoId) {
		visitInfoIds.value = visitInfoId
		getVisitorInfo(visitInfoId)
	}
})
// 获取访问详情数据
const visiteInfo = ref(null)
const reqVisiteInfo = async (id) => {
	try {
		const { code, data: res } = await getVisitDetails({ id })
		if (code === 200) {
			visiteInfo.value = res
			postData.visitId = res.id
		}
	} catch (e) {
		//TODO handle the exception
	}
}
// 获取老人详情信息
const olderInfo = ref({})
const getolderInfo = async (elderId) => {
	try {
		const { code, data: res } = await getElderInfo({ elderId })
		if (code === 200) {
			olderInfo.value = res
		}
	} catch (e) {
		//TODO handle the exception
	}
}
// 获取访问人员信息
const getVisitorInfo = async (visitInfoId) => {
	try {
		const { code, data: res } = await getVisitorDetails({ visitInfoId })
		if (code === 200) {
			postData.name = res.name
			postData.idCard = res.idCard
			postData.phone = res.phone
			postData.number = res.number
			postData.licensePlate = res.licensePlate
			postData.relation = res.relation
			relationList.value.forEach((val) => {
				if (res.relation === val.value) {
					val.isChecked = true
				}
			})
		}
	} catch (e) {
		//TODO handle the exception
	}
}

const agree = async () => {
	// 进院申请
	if (['1', '3'].includes(leavetypes.value)) {
		vistorInfo.value
			.validate()
			.then((res) => {
				examine(leavetypes.value)
			})
			.catch((err) => {
				uni.showToast({
					icon: 'error',
					title: '请检查填写信息！',
				})
			})
	} else {
		// 离院申请
		const visitInfoId = visitInfoIds.value
		const { code, data: res } = await visitationAway(visitInfoId)
		if (code === 200) {
			if (res) {
				uni.showToast({
					icon: 'success',
					title: '操作成功！',
					duration: 1000,
					complete() {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					},
				})
			}
		}
	}
}
const postData = reactive({
	visitId: '',
	elderId: '',
	name: '',
	idCard: '',
	phone: '',
	number: '',
	licensePlate: '',
	relation: '',
})
const examine = async (type) => {
	const { code, data: res } =
		type === '1'
			? await insertVisitorInfo(postData)
			: await insertTempVisitorInfo(postData)
	if (code === 200) {
		if (res) {
			uni.showToast({
				icon: 'success',
				title: '操作成功！',
				duration: 1000,
				complete() {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				},
			})
		}
	}
}
const baseInfoList = [
	[
		{
			label: '姓名',
			props: 'elderName',
		},
		{
			label: '房间',
			props: 'buildRoomNum',
		},
		{
			label: '性别',
			props: 'gender',
		},
		{
			label: '年龄',
			props: 'age',
		},
	],
	[
		{
			label: '联系电话',
			props: 'phoneNumber',
		},
		{
			label: '身份证号',
			props: 'cardId',
		},
		{
			label: '身高',
			props: 'height',
		},
		{
			label: '体重',
			props: 'weight',
		},
		{
			label: '家庭住址',
			props: 'homeAddress',
		},
	],
]
const timeList = ref([
	{
		label: '来访人员*',
		props: 'visitorName',
	},
	{
		label: '联系电话',
		props: 'phoneNumber',
	},
	{
		label:"来访时间",
		props:"visitTime"
	},
	{
		label: '车牌编号',
		props: 'licensePlate',
	},
	{
		label: '身份证号',
		props: 'idCard',
	},
	{
		label: '备注',
		props: 'remark',
	},
])
const passList = ref([
	{
		label: '审批人',
		props: 'auditor',
	},
	{
		label: '审批时间',
		props: 'auditTime',
	},
])
const reviewStatusCash = (type) => {
	let str = ''
	switch (type) {
		case '1':
			str = '待审核'
			break
		case '2':
			str = '驳回'
			break
		case '3':
			str = '已同意'
			break
	}
	return str
}
</script>

<style lang="less" scoped>
.visiteInfo {
	.baseInfo_topic {
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}
	.line {
		height: 1rpx;
		width: 100%;
	}
	.baseInfo {
		margin-top: 28rpx;
		.floor1 {
			display: flex;
			justify-content: space-between;
			.left {
			}
			.right {
				image {
					width: 228rpx;
					height: 184rpx;
				}
			}
		}
		.floor2 {
			.foldable {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				> image {
					width: 24rpx;
					height: 14rpx;
					margin-left: 14rpx;
				}
			}
		}
		.expend {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			> image {
				width: 24rpx;
				height: 14rpx;
				margin-left: 14rpx;
			}
		}

		.baseInfo_topic {
			text {
				color: #666666;
				font-size: 30rpx;
				font-weight: 500;
			}
		}
	}
}
.row {
	display: flex;
	font-weight: 400;
	font-size: 30rpx;
	margin-bottom: 14rpx;
	.label {
		color: #999999;
		margin-right: 22rpx;
	}
	.content {
		color: #333333;
	}
}
.space {
	justify-content: space-between;
}
.topic {
	margin: 28rpx 0;
}
.listWrap {
	margin-top: 15rpx;
}
.pass {
	margin-top: 45rpx;
}
.remark {
	margin-top: 45rpx;
}
.btn_group {
margin-top: 80rpx;
	.process_state {
		width: 100%;
		display: flex;
		view {
			flex: 1;
			height: 80rpx;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			text-align: center;
			line-height: 80rpx;
			&:first-child {
				background-color: #f2f8ff;
				color: #666666;
				margin-right: 20rpx;
			}
			&:last-child {
				background:  linear-gradient( 180deg, #8072f2 0%, #147FF3 100%);
				color: #ffffff;
			}
		}
	}
}
.remarkResult {
	padding: 10rpx 0;
	color: #333333;
	font-size: 30rpx;
}
.formList {
	width: 100%;
	.formItem {
		> image {
			height: 1rpx;
			width: 100%;
			margin: 8rpx 0 15rpx;
		}
	}
	.formItem_content {
		display: flex;
		justify-content: space-between;
		.label {
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			padding-left: 15rpx;
		}
		.relation {
			display: flex;
			margin-left: 80rpx;
			.relation_item {
				display: flex;
				align-items: center;
				margin-right: 30rpx;
				width: 120rpx;
				&:last-child {
					margin-right: 0;
				}
				> image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	input {
		text-align: right; /* 使文本在输入框内右对齐 */
	}
	:deep(.uni-forms-item) {
		margin-bottom: 0;
	}
	:deep(.uni-forms-item__label) {
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		height: auto;
		min-width: 200rpx;
	}
	:deep(.uni-forms-item__error) {
		width: 100%;
		text-align: right;
	}
	:deep(.uni-input-placeholder){
		color: #999999;
	}
}
@media screen and (min-width: 768px) {
	.visiteInfo {
		.baseInfo_topic {
			font-size: 60rpx;
		}
		.baseInfo {
			.floor1 {
				.left {
				}
				.right {
					image {
						width: 448rpx;
						height: 360rpx;
					}
				}
			}
			.floor2 {
				font-size: 45rpx;
				.foldable {
					font-size: 36rpx;
					> image {
						width: 34rpx;
						height: 18rpx;
					}
				}
			}
			.expend {
				font-size: 36rpx;
				> image {
					width: 34rpx;
					height: 18rpx;
				}
			}
		}
	}
	.row {
		font-size: 42rpx;
		line-height: 42rpx;
		margin-bottom: 60rpx;
	}
	.remarkResult {
		font-size: 42rpx;
	}

	.formList {
		.formItem {
			font-size: 42rpx;
		}
		.formItem_content {
			.relation {
				.relation_item {
					width: 200rpx;
					font-size: 42rpx;
				}
			}
		}
		:deep(.uni-forms-item__label) {
			font-size: 42rpx;
			width: 300rpx !important;
		}
		:deep(.uni-input-placeholder) {
			font-size: 42rpx;
		}
		:deep(.uni-input-input) {
			font-size: 42rpx;
		}
	}
	.btn_group {
		margin: 0 auto;
		margin-top: 100rpx;
		width: 50%;
		.process_state {
			> view {
				font-size: 42rpx;
				height: 120rpx;
				line-height: 120rpx;
			}
		}
	}
	.topic {
		font-size: 60rpx;
	}
}
</style>
